'use client'

import React from 'react'
import { Button, Tooltip } from 'antd'
import { SunOutlined, MoonOutlined } from '@ant-design/icons'
import { useTheme } from '@/components/ThemeProvider'

export const ThemeToggle: React.FC = () => {
    const { theme, toggleTheme } = useTheme()

    return (
        <Tooltip title={theme === 'light' ? '切换到暗色模式' : '切换到亮色模式'}>
            <Button
                type="text"
                icon={theme === 'light' ? <MoonOutlined /> : <SunOutlined />}
                onClick={toggleTheme}
                className="theme-toggle-btn transition-all duration-300 hover:scale-110"
                style={{
                    color: theme === 'light' ? '#8c8c8c' : '#ffffff',
                }}
            />
        </Tooltip>
    )
}

export default ThemeToggle